<template>
  <ComWrapper>
    <el-card shadow="never">
      <el-alert title="直接分割的" type="success" style="margin-bottom: 20px;" />
			<div class="mask-wrapper mask1"></div>
    </el-card>
    <el-card shadow="never">
      <el-alert title="过渡切换的效果" type="success" style="margin-bottom: 20px;" />
			<div class="mask-wrapper mask2"></div>
    </el-card>
    <el-card shadow="never">
      <el-alert title="过渡切换的效果" type="success" style="margin-bottom: 20px;" />
			<div class="mask-wrapper mask2"></div>
    </el-card>
    <el-card shadow="never">
      <el-alert title="转场效果 --- 1" type="success" style="margin-bottom: 20px;" />
			<div class="mask-wrapper mask3"></div>
    </el-card>
    <el-card shadow="never">
      <el-alert title="转场效果 --- 2" type="success" style="margin-bottom: 20px;" />
			<div class="mask-zhuanchang"></div>
    </el-card>
    <el-card shadow="never">
      <el-alert title="mask 搭配滤镜 contrast 及动画" type="success" style="margin-bottom: 20px;" />
			<div class="mask-contrast"></div>
    </el-card>
    <el-card shadow="never">
      <el-alert title="mask & filter & blend-mode" type="success" style="margin-bottom: 20px;" />
			<div class="blend-mode">
        <div class="inner"></div>
      </div>
    </el-card>
  </ComWrapper>
</template>

<style scoped lang="scss">
.el-card {
  margin-bottom: 20px;
}
.mask-wrapper {
  position: relative;
  @include wh(250px, 250px);
  background-size: 250px 250px;
  background: url(../../assets/users/1.png) no-repeat;
  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0; 
    right: 0;
    bottom: 0;
    background: url(../../assets/users/2.png) no-repeat;
    background-size: 200px 250px;
    z-index: 1;
  }
}
.mask1 {
  &::before {
    mask: linear-gradient(45deg, #000 50%, transparent 50%);
  }
}
.mask2 {
  &::before {
    mask: linear-gradient(45deg, #000 40%, transparent 60%);
  }
}
.mask3 {
  &::before {
    animation: maskRotate 4s ease-in-out infinite;
  }
}
.mask-zhuanchang {
  position: relative;
  @include wh(500px, 250px);
  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0; 
    right: 0;
    bottom: 0;
    background: url(../../assets/users/2.png) no-repeat;
    background-size: cover;
    z-index: 1;
    animation: maskZCRotate 1.2s linear;
  }
}
.blend-mode {
  position: relative;
  height: 250px;
  background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
  .inner {
    height: 100%;
    background: #000;
    filter: contrast(500%);
    mix-blend-mode: multiply;
    &::before {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background: radial-gradient(#fff, transparent);
      background-size: 12px 12px;
      mask: linear-gradient(#000, rgba(0, 0, 0, .5));
    }
  }
}
.mask-contrast {
  position: relative;
  @include wh(500px, 250px);
  background: #fff;
  &::before {
    content: "";
    position: absolute;
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    background: radial-gradient(#0044aa, transparent);
    background-size: 20px 20px;
    mask: repeating-radial-gradient(circle at 35% 65%, red, rgba(255, 0, 0, .5), #000 25%);
    animation: maskMove 20s infinite ease-in-out alternate;
  }
}

@keyframes maskRotate {
  @for $i from 0 through 50 { 
    #{$i}% {
      mask: linear-gradient(45deg, #000 #{$i * 2 + '%'}, transparent #{$i * 2.5 + '%'}, transparent #{$i * 2.5 + '%'});
    }
  }
  100% {
    mask: linear-gradient(45deg, #000, #000 100%);
  }
}
@keyframes maskZCRotate {
  @for $i from 0 through 100 { 
    #{$i}% {
      mask: conic-gradient(#000 #{$i - 8 + '%'}, transparent #{$i + '%'}, transparent);
    }
  }
}
@keyframes maskMove {
  @for $i from 0 through 100 { 
    #{$i}% {
      mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .6), #000 #{$i / 3 + 10 + '%'});
      filter: hue-rotate(#{$i * 3.6 + 'deg'})
    }
  }
}
</style>
